import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Tabs, Row, Select, Table, Avatar, Modal } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { router } from 'umi'
import { getCatList, getSizeList } from '@/services/goodCenter/goodsManage/goodsNorm'

const { TextArea } = Input

// 表头
const columns = [
  {
    title: '规格名称',
    dataIndex: 'normName',
    key: 'normName',
    align: 'center'
  },
  {
    title: '规格所属分类',
    dataIndex: 'goodsCata',
    key: 'goodsCata',
    align: 'center'
  },
  {
    title: '规格值列表',
    dataIndex: 'list',
    key: 'list',
    align: 'center'
  }
]

const GoodsNorm = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [total, setTotal] = useState(1)
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [record, setRecord] = useState({})
  const [sizeList, setSizeList] = useState([])
  const [catList, setCatList] = useState([])
  const [visible, setVisible] = useState(false)

  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setRecord(selectedRows)
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(record)
    },
  }

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    await getCatLists()
    let params = {
      pageNo,
      pageSize,
      resGoodsNormPro: {
        normName: '',
        goodsCataId: '0'
      }
    }
    await getSizeLists(params)
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let params = {
        pageNo,
        pageSize,
        resGoodsNormPro: {
          normName: values.normName,
          goodsCataId: values.goodsCataId
        }
      }
      await getSizeLists(params)
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <Row gutter={24}>
        <Col span={12}>
          <Form.Item label="规格名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('normName', {})
              (<Input placeholder="请输入规格名称" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="商品分类" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('goodsCataId', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                { catList && catList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
      </Row>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    console.log(type)
    switch (type) {
      case 1:
        handleModal()
        break
    }
  }

  const pagination = {
    total: parseInt(total),
    onChange(page) {
      let params = {
        pageNo: page,
        pageSize,
        resGoodsNormPro: {
          normName: '',
          goodsCataId: '0'
        }
      }
      getSizeLists(params)
    }
  }

  // 获取商品分类列表
  const getCatLists = async () => {
    let params = {
      resGoodsCat: {
        catParentId: '0'
      }
    }
    let res = await getCatList(params)
    if (res.code === '0') {
      setCatList(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 获取规格列表
  const getSizeLists = async (params) => {
    let res = await getSizeList(params)
    if (res.code === '0') {
      setSizeList(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 操控弹出层
  const handleModal = () => {
    setVisible(!visible)
  }
  const handleOk = () => {
    alert('请选择一级分类')
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table
        columns={columns}
        dataSource={sizeList}
        rowKey={record => record.id}
        pagination={pagination}
        rowSelection={rowSelection}
      />
      <Modal
        title="添加商品分类规格"
        visible={visible}
        onOk={handleOk}
        onCancel={handleModal}
      >
        <Row gutter={24}>
          <Col span={24}>
            <Form.Item label="规格名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('normName', {})
                (<Input placeholder="请输入规格名称" />)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="商品分类" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('goodsCataId', {})
                (<Select
                  style={{ width: '100%' }}
                  showSearch
                  filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                  placeholder="请选择"
                >
                  { catList && catList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
                </Select>)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="规格值" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('size', {})
                (<TextArea placeholder="请输入规格值" />)}
            </Form.Item>
          </Col>
        </Row>
      </Modal>
   </PageHeaderWrapper>
  )
}

export default Form.create()(GoodsNorm)
